import React, { PureComponent , PropTypes } from 'react';

import styles from './styles.scss';

const LazyLoad = Promise => {

    class LoadComp extends PureComponent {
        Promise = Promise;

        state = {
            LazyComp:null,
            error:false
        };

        componentWillMount () {
            this.loadComp();
        }

        loadComp(){
            this.Promise().then( comp => {
                return comp.default? comp.default : comp;
            }).then( comp => (
                this.setState({
                    LazyComp:comp
                })
            ));
        }

        params = () => {
            const { match , location } = this.props;
            return {
                ...match.params,
                search:location.search
            }
        };

        render() {
            const { LazyComp } = this.state;
            return !!LazyComp ? (
                <LazyComp
                    params={this.params()}
                    {...this.props}
                />
            ): <Loading />;
        }
    }

    return LoadComp;
};


const Loading = props => (
    <div className={styles.page_load_layer}>
        <div className={styles.page_load_wrapper}>
             <div className={styles.loading_center} />
        </div>
    </div>
);



export default LazyLoad;





